<template>
   <el-form :inline="true" :model="from" class="demo-form-inline">
    <el-form-item label="创建时间">
      <el-date-picker
        v-model="from.createTime"
        type="daterange"
        start-placeholder="Start Date"
        end-placeholder="End Date"
        :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
      />
    </el-form-item>
    <el-form-item label="报告类型">
      <el-select
        v-model="from.reportsType"
        placeholder="请选择报告类型"
        clearable
      >
        <el-option label="血压分析报告" value="血压分析报告" />
        <el-option label="血糖分析报告" value="血糖分析报告" />
        <el-option label="综合健康报告" value="综合健康报告" />
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="getReports()">查询</el-button>
      <el-button type="info" @click="getReports">重置</el-button>
      <el-button type="success"  @click="outerVisible = true">新增</el-button>
    </el-form-item>
  </el-form>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="reportsType" label="报告类型" width="180" />
      <el-table-column prop="userName" label="创建人" width="180" />
      <el-table-column prop="createTime" label="创建时间" >
        <template #default="scope">
          {{scope.row.createTime.substr(0,10)}}
        </template>
      </el-table-column>
      <el-table-column prop="reportingperiod" label="报告周期" v-slot="scope" >
       <span v-if="scope.row.quarter=='第一季度'">{{scope.row.reportingperiod.substr(0,4)}}-01-01~{{scope.row.reportingperiod.substr(0,4)}}-03-31</span>
       <span v-if="scope.row.quarter=='第二季度'">{{scope.row.reportingperiod.substr(0,4)}}-04-01~{{scope.row.reportingperiod.substr(0,4)}}-06-31</span>
       <span v-if="scope.row.quarter=='第三季度'">{{scope.row.reportingperiod.substr(0,4)}}-07-01~{{scope.row.reportingperiod.substr(0,4)}}-09-31</span>
       <span v-if="scope.row.quarter=='第死季度'">{{scope.row.reportingperiod.substr(0,4)}}-10-01~{{scope.row.reportingperiod.substr(0,4)}}-12-31</span>
       <span v-if="scope.row.quarter=='年度'">{{scope.row.reportingperiod.substr(0,4)}}年年度</span>
        </el-table-column>
      <el-table-column prop="publisher" label="发布人" >
        <template #default="scope">
          {{scope.row.publisher==0?"":"admin"}}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="发布状态" />
      <el-table-column prop="address" label="操作" >
        <template #default="scope">
        <el-button v-show="scope.row.status == '未发布'" @click="changeStatus(scope.row.reportsId,'发布')" link type="success" size="small"> 发布</el-button>
        <el-button v-show="scope.row.status == '未发布'" @click="delReports(scope.row.reportsId)"  link type="danger"  size="small"> 删除</el-button>
        <el-button v-show="scope.row.status == '发布'"  @click=" getSignData()" link type="primary" size="small"> 详情</el-button>
        <el-button v-show="scope.row.status == '发布'" @click="changeStatus(scope.row.reportsId,'未发布')"   link type="warning" size="small"> 撤回</el-button>
      </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      v-model:current-page="from.pageIndex"
      v-model:page-size="from.pageSize"
      :page-sizes="[15, 20, 30, 2]"
      layout="total, sizes, prev, pager, next, jumper"
      prev-text="上一页"
      next-text="下一页"
      :total="from.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!--新增弹出框-->
    <el-dialog v-model="outerVisible" title="新增报告" width="300">
    <span>
      <el-date-picker
          v-model="reports.reportingperiod"
          type="year"
          placeholder="Pick a year"
        />
      <el-select v-model="reports.quarter" placeholder="请选择季度">
        <el-option label="第一季度" value="第一季度" />
        <el-option label="第二季度" value="第二季度" />
        <el-option label="第三季度" value="第三季度" />
        <el-option label="第四季度" value="第四季度" />
        <el-option label="年度" value="年度" />
      </el-select>
      <el-select v-model="reports.reportsType" placeholder="请选择报告类型">
        <el-option label="血压分析报告" value="血压分析报告" />
        <el-option label="血糖分析报告" value="血糖分析报告" />
        <el-option label="综合健康报告" value="综合健康报告" />
      </el-select>
    </span>
    <el-dialog
      v-model="innerVisible"
      width="500"
      title="Inner Dialog"
      append-to-body
    >
      <span>This is the inner Dialog</span>
    </el-dialog>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="outerVisible = false">取消</el-button>
        <el-button type="primary" @click="add()">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!--详情弹出框-->
  <el-dialog
    v-model="dialogVisible"
    title="综合健康报告"
    width="500"
  >
    <span>
      <p>姓名:  {{ coll.collName }} 性别：{{coll.sex  }}  手机号{{coll.sex  }}  性别：{{coll.sex  }}</p>
    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  </template>
  
  <script lang="ts" setup>
  import {onMounted, reactive, ref} from 'vue'
  import { collapseProps, ElMessage, ElMessageBox } from 'element-plus'
  import axios from 'axios'
  import { useCounterStore } from '@/stores/counter';
  const apiUrl = import.meta.env.VITE_APP_API_URL;
  const store = useCounterStore()
  //详情弹出框
const dialogVisible = ref(false)


const coll = reactive({
  collName:'',
  sex:'',
  identityCard:'',
  height:'',
  weight:'',
})
const chaForm = reactive({
      CreateStartTime: "",
      CreateEndTime: "",
      ResidentFiles_Name: "",
      ResidentFiles_Id: 0,
      Team: null,
      Doctor_Name: '',
      PageIndex: 1,
      PageSize: 15
    })

    const page = reactive({
      pageIndex: 1,
      pageSize: 15,
      totalCount: 0,
      totalPage: 0
    })  

    const getSignData = async () => {
      dialogVisible.value=true
      try {
        const res = await axios.get(apiUrl + '/T7/Report/GetReports', {
          params: {
            PageIndex: page.pageIndex,
            PageSize: page.pageSize,
            CreateStartTime: chaForm.CreateStartTime,
            CreateEndTime: chaForm.CreateEndTime,
            ResidentFiles_Name: chaForm.ResidentFiles_Name,
            ResidentFiles_Id: chaForm.ResidentFiles_Id,
            Team: chaForm.Team,
            Doctor_Name: chaForm.Doctor_Name,
          }
        })
        coll.collName = res.data.list[0].residentFiles_Name
        coll.sex = res.data.list[0].sex
        coll.identityCard = res.data.list[0].idCard
        tableData.value = res.data.list
        page.totalCount = res.data.totalCount
        page.totalPage = res.data.totalPage
      } catch (error) {
        ElMessage.error('获取签约数据失败')
      }
    }
//新增弹出框
const outerVisible = ref(false)
const innerVisible = ref(false)
const reports=reactive({
  reportsType:'',
  userId:store.ccstore.userId,
  reportingperiod:'',
  quarter:'',
  status:''
})
const add=()=>{
  axios.post(apiUrl+'/T8/Management/Handle',reports).then(res=>{
    if(res.data.code==212){
      ElMessage({
        message: '添加成功',
        type: 'success',
      })
      outerVisible.value=false
      getReports()
    }else{
      ElMessage({
        message: '添加失败',
        type: 'error',
      })
    }
  })
}
  //分页显示
  const from =reactive({
    totalPage:0,
    totalCount:0,
    pageSize:15,
    pageIndex:1,
    createTime:'',
    reportsType:''
  })
const getReports =()=>{
axios.get(apiUrl+'/T7/Management/GetReports',{params:{CreateTime:from.createTime,ReportsType:from.reportsType,PageSize:from.pageSize,PageIndex:from.pageIndex}}).then(res=>{
    if(res.data.code==210){
      tableData.value=res.data.list
      from.totalPage=res.data.totalPage
      from.totalCount=res.data.totalCount
    }else{
        ElMessage.error('获取失败')
    }
})
}
  const tableData =ref([])
  //钩子函数
  onMounted(()=>{
    getReports()//显示
  })

//分页
  const handleSizeChange = (val: number) => {
    from.pageSize=val
    getReports()
}
const handleCurrentChange = (val: number) => {
    from.pageIndex=val
    getReports()
}

//删除处理
const delReports=(reportsId:any)=>{
  ElMessageBox.confirm(
    '确定要删除吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
  axios.delete(apiUrl+'/T8/Management/DelReports?ReportsId='+reportsId).then(res=>{
    if(res.data.code==204){
    ElMessage.success('删除成功')
      getReports()
    }else{
      ElMessage({
        message: '删除失败',
  })
}
  })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
}
//修改状态
const changeStatus=(reportsId:any,status:any)=>{
  axios.put(apiUrl+'/T8/Management/UpdateReports',{reportsId:reportsId,status:status}).then(res=>{
    if(res.data.code==206){
   if(status=='发布'){
    ElMessage.success('发布成功')
      getReports()
    }else{
      ElMessageBox.confirm(
    '确定要取消发布吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  .then(() => {
    axios.put(apiUrl+'/T8/Management/UpdateReports',{reportsId:reportsId,status:status}).then(res=>{
      if(res.data.code==206){
    ElMessage.warning('取消发布')
      getReports()
    }else{
      ElMessage({
        message: '取消发布失败',
  })
}
  })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
}
   }
})
}

  </script>
  <style>
  .demo-form-inline .el-input {
    --el-input-width: 220px;
  }
  
  .demo-form-inline .el-select {
    --el-select-width: 220px;
  }
  </style>
  